<template>
  <div>
    <el-card>
      <el-input v-model="keyword" placeholder="请输入内容" style="width: 200px;margin-left: 30px" />
      <el-button type="primary" icon="el-icon-search" style="margin-left: 30px" @click="searchByKeyword">搜索</el-button>
      <el-button @click="emptyByKeyword">清空</el-button>
      <div style="margin: 30px">
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 30px" @click="addUser('add')">添加</el-button>
        <el-button icon="el-icon-delete" type="danger" :disabled="isShowDeletebtn" @click="deleteUsers">批量删除</el-button>
      </div>
      <!--      表格区域-->
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 60%;margin-left: 30px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="160"
          type="index"
        />
        <el-table-column
          prop="roleName"
          label="角色名称"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.deleted">{{ scope.row.roleName }}</span>
            <div>
              <el-input v-show="scope.row.isShowSpan===false" v-model="scope.row.text" style="width: 70%;height: 100%" size="mini " />
              <el-button v-show="scope.row.isShowSpan===false" style="margin-left: 20px; width: 20%" size="mini" @click="clearInputText(scope)"> 清空</el-button>
            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-message" @click="GetMenuById(scope)" />
            <el-button v-if="!scope.row.deleted" type="primary" icon="el-icon-edit" @click="GetchangeInput(scope)" />
            <el-button v-if="scope.row.deleted" type="primary" icon="el-icon-plus" @click="getchangname(scope)" />
            <el-button type="danger" icon="el-icon-delete" @click="deleteUserById(scope)" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!--      树形控件区域-->

      <el-dialog
        title="提示"
        :visible.sync="isShowTree"
        width="50%"
      >
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :props="defaultProps"
          :default-checked-keys="defaultChecked"
          @check-change="handleCheckChange"
          @check="check"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowTree = false">取 消</el-button>
          <el-button type="primary" @click="saveUserRole">确 定</el-button>
        </span>
      </el-dialog>
      <!--      添加的对话框-->
      <el-dialog
        title="添加角色"
        :visible.sync="addDialogVisible"
        width="30%"
      >
        <span>请输入新名称</span>
        <el-input v-model="addUserrole" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserTrue">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  dateleUsers,
  reqAddUserrole,
  reqassignuserRole,
  reqDeteleUser,
  reqGetMenuById,
  reqroleLList,
  reqUpdateRoleName
} from '@/api/user'

export default {
  name: 'Role',
  data() {
    return {
      keyword: '',
      pageNo: 1,
      pageSize: 5,
      total: 0,
      flag: true,
      // 是否展示树形控件
      isShowTree: false,
      tableData: [],
      treeData: [],
      roleId: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 当前选中的所有的Id
      permissionIdList: [],
      // 添加的对话框默认不显示
      addDialogVisible: false,
      // 双向绑定
      addUserrole: '',
      // 删除时   批量删除的数组 里面是每一个对象
      selection: []
    }
  },
  computed: {
    defaultChecked() {
      const arr = []
      this.treeData.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.select === true) {
            arr.push(item1.id)
          }
          item1.children.forEach((item2) => {
            if (item2.select === true) {
              arr.push(item2.id)
            }
          })
        }
        )
      })
      return arr
    },
    isShowDeletebtn() {
      if (this.selection.length < 1) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getRoledata()
  },
  methods: {
    // 控制当前条是否显示
    GetchangeInput(scope) {
      this.$set(scope.row, 'isShowSpan', false)
      this.$set(scope.row, 'text', '')
      scope.row.deleted = true
    },
    async  getchangname(scope) {
      const data = {
        id: scope.row.id,
        roleName: scope.row.text
      }
      const res = await reqUpdateRoleName(data)
      console.log('1111', res)
      if (res.code === 20000) {
        this.getRoledata()
        scope.row.isShowSpan = true
        scope.row.deleted = false
      }
    },
    clearInputText(scope) {
      scope.row.text = ''
      scope.row.isShowSpan = true
      scope.row.deleted = false
    },
    async getRoledata() {
      const { pageNo, pageSize, keyword } = this
      const res = await reqroleLList(pageNo, pageSize, keyword)
      if (res.code === 20000) {
        this.tableData = res.data.items
        this.total = res.data.total
      }
    },
    // 按照关键字搜索
    searchByKeyword() {
      this.getRoledata()
    },
    // 清空
    emptyByKeyword() {
      this.getRoledata()
    },
    // 添加
    addUser() {
      this.addDialogVisible = true
    },
    async addUserTrue() {
      const res = await reqAddUserrole({ roleName: this.addUserrole })
      console.log(res)
      if (res.code === 20000) {
        this.addDialogVisible = false
        this.getRoledata()
      }
    },
    // 批量删除
    async deleteUsers() {
      const req = []
      this.selection.forEach((item) => {
        req.push(item.id)
      })
      const res = await dateleUsers(req)
      if (res.code === 20000) {
        this.getRoledata()
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getRoledata()
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo
      this.getRoledata()
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      this.selection = selection
    },
    async GetMenuById(scope) {
      this.roleId = scope.row.id
      const res = await reqGetMenuById(scope.row.id)
      if (res.code === 20000) {
        this.treeData = res.data.children
      }
      this.isShowTree = true
    },
    // 传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate)
    },
    check(checkedNodes, b) {
      console.log(checkedNodes, b)
      // 当前选中的所有id
      this.permissionIdList = b.checkedKeys
    },
    async saveUserRole() {
      const permissionIdList = this.permissionIdList.join(',')
      const res = await reqassignuserRole(this.roleId, permissionIdList)
      console.log(res)
      if (res.code === 20000) {
        this.$message.success('更新权限成功！')
        this.isShowTree = false
        this.getRoledata()
      } else {
        this.$message.error('更新失败  请稍后再试')
        this.isShowTree = false
        this.getRoledata()
      }
    },
    // 删除这块
    async deleteUserById(scope) {
      console.log(scope)
      const res = await reqDeteleUser(scope.row.id)
      console.log(res)
      if (res.code === 20000) {
        this.getRoledata()
      }
    }
  }
}
</script>

<style scoped>

</style>
